<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>响应式布局-blog</title>
  <link rel="stylesheet" href="./main.css">
  <link rel="stylesheet" href="./desktop.css" media="(min-width: 768px)">
  <link rel="stylesheet" href="./mobile.css" media="(max-width:768px">

  <style>
    @media screen and (min-width:500px) {
      body {
        background-color: red;
      }
    }
  </style>
</head>

<body>
  <header>
    <div class="header-author">Just Coding</div>
    <ul>
      <li>技术</li>
      <li>生活</li>
    </ul>
  </header>
  <div class="container">

    <label class="menu-list-label" for="menu-list">菜单</label>
    <input type="checkbox" name="" id="menu-list">
    <div class="meun">
      <ul class="first">
        <li>文章列表</li>
        <li>关于我</li>
        <li>捐赠</li>
      </ul>

      <ul class="about-me">
        <ul>
          <li>#亲亲我</li>
          <li>#抱抱我</li>
          <li>#爱爱我</li>
        </ul>
      </ul>
    </div>
    <div class="article-list">
      <div class="article">
        <h3 class="article-title">lorem</h3>
        <div class="article-info">
          <span class="author">Just Coding | </span>
          <span class="views-count">查看:333 |</span>
          <span class="comments-count">留言:12 |</span>
          <span class="publish-date">2019年05月21日18:26:27 </span>
          <article>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae saepe facilis vel aut modi magnam pariatur
            libero perferendis tempore fugit, placeat id? Labore nesciunt quas laboriosam necessitatibus vero tenetur
            doloremque.
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae saepe facilis vel aut modi magnam pariatur
            libero perferendis tempore fugit, placeat id? Labore nesciunt quas laboriosam necessitatibus vero tenetur
            doloremque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae saepe facilis vel aut modi magnam
            pariatur libero perferendis tempore fugit, placeat id? Labore nesciunt quas laboriosam necessitatibus vero
            tenetur doloremque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae saepe facilis vel aut modi
            magnam pariatur libero perferendis tempore fugit, placeat id? Labore nesciunt quas laboriosam necessitatibus
            vero tenetur doloremque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae saepe facilis vel aut
            modi magnam pariatur libero perferendis tempore fugit, placeat id? Labore nesciunt quas laboriosam
            necessitatibus vero tenetur doloremque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae saepe
            facilis vel aut modi magnam pariatur libero perferendis tempore fugit, placeat id? Labore nesciunt quas
            laboriosam necessitatibus vero tenetur doloremque.
          </article>
        </div>
      </div>

      <div class="article">
        <h3 class="article-title">lorem</h3>
        <div class="article-info">
          <span class="author">Just Coding</span>
          <span class="views-count">查看:333 |</span>
          <span class="comments-count">留言:12 |</span>
          <span class="publish-date">2019年05月21日18:26:27 </span>
          <article>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae saepe facilis vel aut modi magnam pariatur
            libero perferendis tempore fugit, placeat id? Labore nesciunt quas laboriosam necessitatibus vero tenetur
            doloremque.
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae saepe facilis vel aut modi magnam pariatur
            libero perferendis tempore fugit, placeat id? Labore nesciunt quas laboriosam necessitatibus vero tenetur
            doloremque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae saepe facilis vel aut modi magnam
            pariatur libero perferendis tempore fugit, placeat id? Labore nesciunt quas laboriosam necessitatibus vero
            tenetur doloremque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae saepe facilis vel aut modi
            magnam pariatur libero perferendis tempore fugit, placeat id? Labore nesciunt quas laboriosam necessitatibus
            vero tenetur doloremque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae saepe facilis vel aut
            modi magnam pariatur libero perferendis tempore fugit, placeat id? Labore nesciunt quas laboriosam
            necessitatibus vero tenetur doloremque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae saepe
            facilis vel aut modi magnam pariatur libero perferendis tempore fugit, placeat id? Labore nesciunt quas
            laboriosam necessitatibus vero tenetur doloremque.
          </article>
        </div>
      </div>
      <div class="article">
        <h3 class="article-title">lorem</h3>
        <div class="article-info">
          <span class="author">Just Coding</span>
          <span class="views-count">查看:333 |</span>
          <span class="comments-count">留言:12 |</span>
          <span class="publish-date">2019年05月21日18:26:27 </span>
          <article>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae saepe facilis vel aut modi magnam pariatur
            libero perferendis tempore fugit, placeat id? Labore nesciunt quas laboriosam necessitatibus vero tenetur
            doloremque.
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae saepe facilis vel aut modi magnam pariatur
            libero perferendis tempore fugit, placeat id? Labore nesciunt quas laboriosam necessitatibus vero tenetur
            doloremque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae saepe facilis vel aut modi magnam
            pariatur libero perferendis tempore fugit, placeat id? Labore nesciunt quas laboriosam necessitatibus vero
            tenetur doloremque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae saepe facilis vel aut modi
            magnam pariatur libero perferendis tempore fugit, placeat id? Labore nesciunt quas laboriosam necessitatibus
            vero tenetur doloremque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae saepe facilis vel aut
            modi magnam pariatur libero perferendis tempore fugit, placeat id? Labore nesciunt quas laboriosam
            necessitatibus vero tenetur doloremque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae saepe
            facilis vel aut modi magnam pariatur libero perferendis tempore fugit, placeat id? Labore nesciunt quas
            laboriosam necessitatibus vero tenetur doloremque.
          </article>
        </div>
      </div>
      <div class="article">
        <h3 class="article-title">lorem</h3>
        <div class="article-info">
          <span class="author">Just Coding</span>
          <span class="views-count">查看:333 |</span>
          <span class="comments-count">留言:12 |</span>
          <span class="publish-date">2019年05月21日18:26:27 </span>
          <article>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae saepe facilis vel aut modi magnam pariatur
            libero perferendis tempore fugit, placeat id? Labore nesciunt quas laboriosam necessitatibus vero tenetur
            doloremque.
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae saepe facilis vel aut modi magnam pariatur
            libero perferendis tempore fugit, placeat id? Labore nesciunt quas laboriosam necessitatibus vero tenetur
            doloremque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae saepe facilis vel aut modi magnam
            pariatur libero perferendis tempore fugit, placeat id? Labore nesciunt quas laboriosam necessitatibus vero
            tenetur doloremque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae saepe facilis vel aut modi
            magnam pariatur libero perferendis tempore fugit, placeat id? Labore nesciunt quas laboriosam necessitatibus
            vero tenetur doloremque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae saepe facilis vel aut
            modi magnam pariatur libero perferendis tempore fugit, placeat id? Labore nesciunt quas laboriosam
            necessitatibus vero tenetur doloremque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae saepe
            facilis vel aut modi magnam pariatur libero perferendis tempore fugit, placeat id? Labore nesciunt quas
            laboriosam necessitatibus vero tenetur doloremque.
          </article>
        </div>
      </div>
      <div class="article">
        <h3 class="article-title">lorem</h3>
        <div class="article-info">
          <span class="author">Just Coding</span>
          <span class="views-count">查看:333 |</span>
          <span class="comments-count">留言:12 |</span>
          <span class="publish-date">2019年05月21日18:26:27 </span>
          <article>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae saepe facilis vel aut modi magnam pariatur
            libero perferendis tempore fugit, placeat id? Labore nesciunt quas laboriosam necessitatibus vero tenetur
            doloremque.
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae saepe facilis vel aut modi magnam pariatur
            libero perferendis tempore fugit, placeat id? Labore nesciunt quas laboriosam necessitatibus vero tenetur
            doloremque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae saepe facilis vel aut modi magnam
            pariatur libero perferendis tempore fugit, placeat id? Labore nesciunt quas laboriosam necessitatibus vero
            tenetur doloremque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae saepe facilis vel aut modi
            magnam pariatur libero perferendis tempore fugit, placeat id? Labore nesciunt quas laboriosam necessitatibus
            vero tenetur doloremque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae saepe facilis vel aut
            modi magnam pariatur libero perferendis tempore fugit, placeat id? Labore nesciunt quas laboriosam
            necessitatibus vero tenetur doloremque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae saepe
            facilis vel aut modi magnam pariatur libero perferendis tempore fugit, placeat id? Labore nesciunt quas
            laboriosam necessitatibus vero tenetur doloremque.
          </article>
        </div>
      </div>
    </div>
  </div>
</body>

</html>